import React, { Component, Fragment} from 'react';
import OrderItem from '../OrderItem'

class OrderList extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: []
         }
    }
    componentDidMount() {
        this.setState({
            data: [
                {
                    "id":1,
                    "shop":"院落创意菜",
                    "picture":"http://placehold.it/200x200/",
                    "product":"百香果（冷饮）1扎",
                    "price":19.9,
                    "ifCommented":false,
                    "isEdit": false,
                    "comment": '',
                    "star": 2

                },
                {
                    "id":2,
                    "shop":"正一味",
                    "picture":"http://placehold.it/200x200/",
                    "product":"肥牛石锅拌饭+鸡蛋羹一份",
                    "price":25,
                    "ifCommented":false,
                    "isEdit": false,
                    "comment": '',
                    "star": 1
                },
                {
                    "id":3,
                    "shop":"冻酸奶",
                    "picture":"http://placehold.it/200x200/",
                    "product":"冻酸奶（小杯)一杯",
                    "price":8,
                    "ifCommented":true,
                    "isEdit": false,
                    "comment": '',
                    "star": 5
                },
                {
                    "id":4,
                    "shop":"吉野家",
                    "picture":"http://placehold.it/200x200/",
                    "product":"鸡汁烧鱼+中杯汽水/紫菜蛋花汤",
                    "price":20,
                    "ifCommented":false,
                    "isEdit": false,
                    "comment": "6666",
                    "star": 3
                }
            ]
        })
    }
    handleOpenEditArea = (id) =>{
        let newData = this.state.data.map(item => {
            return  item.id === id ? {...item,isEdit: true}: item
         })
         this.setState({
             data: newData
         })
    }

    handleCommentSubmit = (val,star,id) => {
        console.log(val,star,id)
        let newData = this.state.data.map(item => {
            return  item.id === id ? {...item,comment: val,star, isEdit:false,ifCommented: true}: item
         })
         this.setState({
             data: newData
         })
    }
    handleCommentCancel = (comment, star, id) => {
        console.log(comment,star,id)
        let newData = this.state.data.map(item => {
            return  item.id === id ? {...item,isEdit:false,ifCommented: false,comment,star}: item
         })
         console.log(newData,'newData')
         this.setState({
            data: newData
         })
    }
    render() { 
        return ( 
        <Fragment>{
            this.state.data.map(item => <OrderItem key={item.id} data={item} 
                handleOpenEditArea={this.handleOpenEditArea}
                handleCommentSubmit={this.handleCommentSubmit}
                handleCommentCancel={this.handleCommentCancel}
                />)
        }</Fragment> );
    }
}
 
export default OrderList;